<!DOCTYPE html>
<html lang="en">
<head>
    <title>未关闭事项-列表</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/dist/plugins/select2/select2.min.css">
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=86e2297f">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=222aea35">
    <style type="text/css">
        .leftFilter {
            float: left;
            text-align: left;
            margin-right: 5px;
        }

        .clickable {
            color: #489EF1;
            cursor: pointer;
            text-align: left;
            font-weight: bold;
        }

        .td {
            text-align: center;
        }
        .table > tbody > tr > td span {
            max-height: 44px;
            line-height: 22px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }
        .redTd {
            color: #FF0000;
        }
        .yellowBg {
            background: #ffff00;
        }
        .greenBg {
            background: #3e8f3e;
        }
        .redBg {
            background: #FF0000;
        }
    </style>
</head>
<body>
<section class="content" id="list">
    <div style="text-align:right;padding-bottom: 10px; height: 35px;">
        <input class="pull-left form-control pull-left input-sm" type="text" placeholder="负责人" style="width: 80px;margin-right: 10px">
        <input class="pull-left form-control pull-left input-sm" type="text" v-model="time" @focus="showDatePicker($event)" placeholder="发起时间" style="width: 120px;margin-right: 10px">
        <input class="pull-left form-control pull-left input-sm" type="text" v-model="time" @focus="showDatePicker($event)" placeholder="预计完成时间" style="width: 120px;margin-right: 10px">
        <!--<input class="pull-left form-control pull-left input-sm" type="text" placeholder="搜索" style="width: 80px">-->
        <button type="button" class="btn oaBtn btn-sm pull-left" style="margin-left: 10px;" @click="query()">查询</button>
        <button type="button" class="btn oaBtn btn-sm pull-right" style="margin-left: 10px;" @click="addDraft()">新增未关闭事项</button>
    </div>
    <div  class="iframeH3" style="width: 70%;float:left;">
        <table class="table table-hover table-bordered" >
        <thead>
        <tr style="height: 50px">
            <!--<th style="text-align: center">公司名称</th>-->
            <th style="width:50px;text-align: center;">操作</th>
            <th style="width:50px;text-align: center;">事项<br>描述</th>
            <th style="width:50px;text-align: center;">最新跟<br>踪情况</th>
            <th style="width:50px;text-align: center;">负责人</th>
            <th style="width:50px;text-align: center;">主送人</th>
            <th style="width:50px;text-align: center;">抄送人</th>
            <th style="width:50px;text-align: center;">发起<br>时间</th>
            <th style="width:50px;text-align: center;">预计完<br>成时间</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in list" :class="(item.predictEndDate<todayDate&&item.itemState=='0')||(item.itemState=='1'&&item.predictEndDate<item.endDate)?'redBg':(item.endDate==todayDate&&item.itemState=='0')?'yellowBg':''">
            <!--<td style="text-align: center;overflow:hidden;">吉林清源</td>-->
            <td v-if="item.itemState=='0'" style="width: 12%;text-align: center;color: #169BD5;background: #ffffff">
                <a style="color: #169BD5; cursor: pointer;" @click="editDraft(item)">回复</a>
                <a style="color: #169BD5; cursor: pointer;" @click="deleteDraft()">关闭</a>
            </td>
            <td v-else style="width: 12%;text-align: center;color: #169BD5;background: #ffffff">
                <a style="color: #169BD5; cursor: pointer;" @click="browse(item.id)">查看</a>
            </td>
            <td style="width: 20%;text-align: center;"><span>{{item.itemName}}</span></td>
            <td style="width: 20%;text-align: center;"><span>{{item.itemSubName}}</span></td>
            <td style="width: 8%;text-align: center;">{{item.createUserName}}</td>
            <td style="width: 8%;text-align: center;">{{item.receiveUserName}}</td>
            <td style="width: 8%;text-align: center;">{{item.subReceiveUserName}}</td>
            <td style="width: 12%;text-align: center;">{{item.beginDate}}</td>
            <td style="width: 12%;text-align: center;">{{item.predictEndDate}}</td>
        </tr>
        </tbody>
    </table>
    </div>
    <div class="iframeH3" style="width: 30%;float:left;overflow-x: scroll"><table class="table table-hover table-bordered" style="width: 500px;">
        <thead>
        <tr style="height: 25px">
            <th :colspan="Object.keys(currentMonthDays).length" style="text-align: center">{{currentMonth}}月</th>
            <th :colspan="Object.keys(nextMonthDays).length" style="text-align: center">{{nextMonth}}月</th>
        </tr>
        <tr style="height: 25px">
            <template v-for="(item, index) in currentMonthDays" >
                <td style="text-align: center">{{index}}</td>
            </template>
            <template v-for="(item, index) in nextMonthDays" >
                <td style="text-align: center">{{index}}</td>
            </template>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in list">
            <template v-for="(day, index) in currentMonthDays" >
                <td :class="(item.beginDate<=day&&item.predictEndDate>=day)?'greenBg':(item.predictEndDate<day&&item.itemState=='0'&&day<=todayDate)||(item.itemState=='1'&&day>=item.beginDate&&day<=item.endDate)?'redBg':''"></td>
            </template>
            <template v-for="(day, index) in nextMonthDays" >
                <td :class="(item.beginDate<=day&&item.predictEndDate>=day)?'greenBg':item.predictEndDate<day&&item.itemState=='0'&&day<=todayDate?'redBg':''"></td>
            </template>
        </tr>
        </tbody>
    </table>
    </div>
    <div class="oa-pager text-center">
        共<span id="allCount">{{recordCount}}</span>条记录&nbsp;&nbsp;&nbsp;
        <span id="nowPage">{{pageIndex}}</span>/<span id="allPage">{{pageCount}}</span>&nbsp;&nbsp;&nbsp;
        <span id="first" class="oa-pager-button" @click="pagination('first')">首页</span>
        <span id="prev" class="oa-pager-button" @click="pagination('pre')">上一页</span>
        <span id="next" class="oa-pager-button" @click="pagination('next')">下一页</span>
        <span id="last" class="oa-pager-button" @click="pagination('last')">尾页</span>
    </div>
    <!-- /.box-body -->
</section>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=54c6b89c"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script type="text/javascript" src="/dist/plugins/select2/select2.full.min.js"></script>
<script type="text/javascript">
    Vue.directive('select2', {
        inserted: function (el, binding, vnode) {
            var options = binding.value || {};

            $(el).select2(options).on("select2:select", function (e) {
                el.dispatchEvent(new Event('change', {target: e.target})); //说好的双向绑定，竟然不安套路
            });
        },
        update: function (el, binding, vnode) {
            $(el).trigger("change");
        }
    });
    var app = new Vue({
        el: '#list',
        data: {
            currentUser: getCurrentUser(),
            pageIndex: 1,
            pageCount: 1,
            recordCount: 1,
            todayDate: '',
            currentMonthDays:{},
            nextMonthDays:{},
            currentMonth: new Date().getMonth()+1,
            nextMonth: new Date().getMonth()+2,
            list: [{
                id:"123456789",
                itemName:"厂房内铁栅栏和大门口公司铭牌安装和房东商议",
                itemSubName:"房东今天不在，明天后天回来见面说",
                createUserName:"徐蓓",
                receiveUserName:"曹国玉",
                subReceiveUserName:"谈小中",
                beginDate:"20180305",
                predictEndDate:"20180308",
                endDate:"",
                itemState:"0"// 未关闭
            },{
                id:"1234567890",
                itemName:"重庆公司办公用品采购",
                itemSubName:"12日已向公司总部申请购买马克笔，白板，白板擦，投影仪，文件柜，便利贴等办公用品。已以单独文件发送山西采购梁娜，跟踪快递信息，暂未收到货。",
                createUserName:"邓芷菁",
                receiveUserName:"曹国玉",
                subReceiveUserName:"谈小中",
                beginDate:"20180310",
                predictEndDate:"20180316",
                endDate:"",
                itemState:"0"// 未关闭
            },{
                id:"12345678901",
                itemName:"重庆公司装修",
                itemSubName:"今日已做好一楼小会议室和二楼挑高空间之间的隔断；二楼财务室、总经理室线路走向等铺设完毕；一楼吊顶已打好框架",
                createUserName:"徐蓓",
                receiveUserName:"曹国玉",
                subReceiveUserName:"谈小中",
                beginDate:"20180302",
                predictEndDate:"20180306",
                endDate:"20180308",
                itemState:"1"// 已关闭
            },{
                id:"123456789012",
                itemName:"重庆公司装修2",
                itemSubName:"今日已做好一楼小会议室和二楼挑高空间之间的隔断；二楼财务室、总经理室线路走向等铺设完毕；一楼吊顶已打好框架",
                createUserName:"徐蓓",
                receiveUserName:"曹国玉",
                subReceiveUserName:"谈小中",
                beginDate:"20180308",
                predictEndDate:"20180312",
                endDate:"20180312",
                itemState:"0"// 未关闭
            }],
            time:"",
            PerES: false
        },
        methods: {
            //  获取某个月的天数
            getMonthDayCount: function (date) {
                /* 获取当前月份 */
                var curMonth = date.getMonth();
                /*  生成实际的月份: 由于curMonth会比实际月份小1, 故需加1 */
                date.setMonth(curMonth + 1);
                /* 将日期设置为0, 这里为什么要这样设置, 我不知道原因, 这是从网上学来的 */
                date.setDate(0);
                /* 返回当月的天数 */
                return date.getDate();
            },
            //  获取当月的所有天数
            getCurrentMonthDays: function () {

                var today = new Date();
                var todayDate = today.getDate();//  当天日期
                var monthDays= this.getMonthDayCount(new Date());
                var dayArry={};
                for (var k = 1; k <= monthDays; k++) {
                    var tempMonth = today.getMonth()+1;
                    dayArry[k]=''+today.getFullYear()+(tempMonth<10?'0'+tempMonth:tempMonth)+(k<10?'0'+k:k);
                }
                return dayArry;
            },
            //  获取下月的所有天数
            getNextMonthDays: function () {

                var nextMonth = this.getNextMonth(new Date());
                var day= this.getMonthDayCount(nextMonth);
                var dayArry={};
                for (var k = 1; k <= day; k++) {
                    var tempMonth = nextMonth.getMonth()+1;
                    dayArry[k]=''+nextMonth.getFullYear()+(tempMonth<10?'0'+tempMonth:tempMonth)+(k<10?'0'+k:k);
                }
                return dayArry;
            },
            //  获取下月日期
            getNextMonth:function (date) {
                var dateString = this.date2String(date);
                var arr = dateString.split('-');
                var year = arr[0]; //获取当前日期的年份
                var month = arr[1]; //获取当前日期的月份
                var day = arr[2]; //获取当前日期的日
                var days = new Date(year, month, 0);
                days = days.getDate(); //获取当前日期中的月的天数
                var year2 = year;
                var month2 = parseInt(month) + 1;
                if (month2 == 13) {
                    year2 = parseInt(year2) + 1;
                    month2 = 1;
                }
                var day2 = day;
                var days2 = new Date(year2, month2, 0);
                days2 = days2.getDate();
                if (day2 > days2) {
                    day2 = days2;
                }
                if (month2 < 10) {
                    month2 = '0' + month2;
                }

                var t2 = year2 + '-' + month2 + '-' + day2;
                t2 = t2.replace(/-/g,"/");
                var date = new Date(t2);
                return date;
            },
            //  date转字符串
            date2String: function (date1) {

                var date = new Date();
                var day = date.getDate().toString();
                var tempMonth = (date.getMonth() + 1);
                var month = (tempMonth<10?'0'+tempMonth:tempMonth).toString();
                var year = date.getFullYear().toString();
                var yyy = year + '-' + month + '-' + day;
                return yyy.toString();
            },
            showDatePicker: function (e) {
                var that = this;
                WdatePicker({
                    onpicked: function (dp) {
                        that.time = dp.cal.getNewDateStr();
                        return true;
                    },
                    //dateFmt:'yyyy-MM-dd HH:mm'
                });
                $(e.target).blur();
            },
            //  查询
            query:function(){
                alert(this.time);
            },
            //  添加账户
            addDraft: function () {

                var that = this;
                url = "/page/item/unfinish/add.html";
                $.dialog({
                    content: 'url:'+url,
                    title: '新增未关闭事项',
                    width: 400,
                    height: 190,
                    max: false,
                    min: false,
                    lock: true
                });
            },
            //  回复
            editDraft:function (item) {

                var that = this;
                top.addTabs({id:"return"+that.id,title: '回复邮件',close: true,url:'/email/send.html'});
            },
            //  关闭
            deleteDraft:function () {
                var that = this;
                url = "/page/item/unfinish/colse.html";
                $.dialog({
                    content: 'url:'+url,
                    title: '关闭',
                    width: 600,
                    height: 80,
                    max: false,
                    min: false,
                    lock: true
                });
            },
            //  查看已关闭事项的跟踪列表
            browse:function (itemId) {
                alert(itemId);
            }
        },

        mounted: function () {
            var that = this;

            var month = this.getCurrentMonthDays();
            that.currentMonthDays = month;

            var nextMonth = this.getNextMonthDays();
            that.nextMonthDays = nextMonth;

            var date = new Date();
            var currentYear = date.getFullYear();
            var currentMonth = (date.getMonth()+1)<10?'0'+(date.getMonth()+1):(date.getMonth()+1);
            var currentDate = date.getDate()<10?'0'+date.getDate():date.getDate();
            that.todayDate = '' + currentYear + currentMonth + currentDate;
        }
    });


</script>

</body>
</html>